<template>
  <div>
    <form-list-modal v-if="formListVisible" 
      :visible="formListVisible"
      @close="close" 
      @save="formListSave"
    />
    <chart-config v-if="settingVisible" 
      :visible="settingVisible"
      :worksheetId="worksheetId"
      :config="config" 
      :model="model" 
      @close="close" 
      @save="save"
    />
  </div>
</template>

<script>
import ChartConfig from "./chartConfig.vue"
import FormListModal from "./modal/formListModal.vue"
export default {
  props: {
    visible: Boolean,
    config: Object,
    model: String
  },
  components: {
    ChartConfig,
    FormListModal
  },
  data() {
    return {
      type: 'chart',
      settingVisible: false,
      formListVisible: false,
      searchInput: '',
      searchInputStyle: 'width: 100px',
      worksheetId: '',
      fieldList: []
    };
  },
  computed:{
    appId() {
        return this.$route.params.appId;
    }
  },
  methods: {
    formListSave(worksheetId) {
      this.worksheetId = worksheetId
      this.formListVisible = false
      this.settingVisible = true
    },
    close() {
      this.$emit("close", this.type);
    },
    save(type, model, params) {
      this.$emit("save", type, model, params);
    }
  },
  mounted(){
      if(this.$props.model === 'update'){
          this.settingVisible = true
          this.formListVisible = false
          this.worksheetId = this.config.worksheetId
      } else {
        this.formListVisible = this.$props.visible
      }
  },
};
</script>